import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Spin,
  Upload,
  Collapse, Empty,Cascader,
  Select, Button, Table, Modal
} from 'antd';
const { Panel } = Collapse;
const {MonthPicker, RangePicker} = DatePicker;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const FormItem = Form.Item;
import Class from '../upload.less'

@Form.create()
export default class CreateModal extends Component {
  state ={
    itemImgFile :[],
    contentImgFile :[],
    carouselImageFile :[],
    carouselVideoFile :[],
    //cityNmae : '',
    cityId : '',
    loading : false
  }
  handleCityChange = (value, selectedOptions)=>{
    console.log(value);
    console.log(selectedOptions);
    const cityNameList = selectedOptions.map((item)=>{
      return item.label
    })
    //const cityName = cityNameList.join('-');
    const cityId = value.join(',');
    this.setState({
      //cityName:cityName,
      cityId:cityId
    })
  }
  componentDidMount() {

  }

  render() {
    const {
      createModalVisible ,
      clseModal,
      city_list,
      type_list,
      createOnSubmit,
      form:{
        getFieldDecorator
      }
    }= this.props;
    const onOk = e =>{
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        this.setState({
          loading:true
        })
        if (err) {
          this.setState({
            loading:false
          })
          return
        };
        if ( this.state.cityId){
         // values.cityName= this.state.cityName;
          values.cityId= this.state.cityId;
        }
        if(values.imageItemFile){
          values.imageItemFile.parmsType = 'uploadFile';
         // values.imageItemFile.fileType = 'one';
        }else {
          message.error("请上传列表项图片")
        }
        if(values.imageContentFile){
          values.imageContentFile.parmsType = 'uploadFile';
          //values.imageContentFile.fileType = 'many';
        }else {
          message.error("请上传列表项图片")
        }
        //values.carouselFile ={};
        let carouselList = [];
        if (values.carouselImageFile &&values.carouselImageFile.fileList.length>0 ){
          carouselList = [...values.carouselImageFile.fileList];
          delete values.carouselImageFile
        }
        if (values.carouselVideoFile &&values.carouselVideoFile.fileList.length>0 ){
          carouselList = [...carouselList,...values.carouselVideoFile.fileList];
          delete values.carouselVideoFile
        }
        if(carouselList.length>0){
          values.carouselFile = {
            fileList :carouselList,
            parmsType: 'uploadFile'
          }
        }
        console.log(values);
        createOnSubmit(values,()=>{
          this.setState({
            loading:false
          })
          this.state.loading=false
        });

      })
    }
    const itemImgProps = { //本方法只适用于单个文件新增删除
      listType: 'picture',
      fileList : this.state.itemImgFile,
      onChange : ({fileList})=>{
        if(fileList.length> 0){
          const file = fileList[fileList.length - 1];
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
            message.error("请上传jpg或png类型文件!");
            return;
          }else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          this.setState({itemImgFile:[file]});
        }else if (fileList.length === 0){
          this.setState({itemImgFile:[]})
        }
      },
      beforeUpload: file => {
        return false;
      },
    }
    const contentImgProps = {//多个文件上传校验
      listType: 'picture',
      fileList : this.state.contentImgFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> this.state.contentImgFile.length){ //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);

          if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
            message.error("请上传jpg或png类型文件!");
            return;
          }else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          this.setState({contentImgFile:fileList})
        }else {
          this.setState({contentImgFile:fileList})
        }
      },
    }
    const carouselImageProps = {
      listType:"picture-card",
      fileList : this.state.carouselImageFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> this.state.carouselImageFile.length){ //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
            message.error("请上传jpg或png类型文件!");
            return;
          }else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          this.setState({carouselImageFile:fileList})
        }else {
          this.setState({carouselImageFile:fileList})
        }
      },
    }
    const carouselVideoProps = {
      listType:"picture-card",
      fileList : this.state.carouselVideoFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> this.state.carouselVideoFile.length){ //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if (!(suffix === 'mp4')){
            message.error("请上传mp4类型文件!");
            return
          }else if (file.size > 10485760){
            message.error("请上传小于10m的视频!");
            return
          }
          this.setState({carouselVideoFile:fileList})
        }else {
          this.setState({carouselVideoFile:fileList})
        }
      },
    }
    return (
      <Modal
        visible={createModalVisible}
        title="添加景区"
        onCancel={clseModal}
        destroyOnClose={true}
        maskClosable={false}
        width={`${document.body.clientWidth * 0.6}px`}
        onOk = {onOk}
      >
        <Spin spinning={this.state.loading}>
          <form layout="inline" >.
            <FormItem
              {...formItemLayout}
              label="景区标题"
              required={true}
            >
              {getFieldDecorator('scenicTitle', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {
                    required: true,
                    message: '景区标题必填',
                  },
                ],
              })(
                <Input style={{ width: '80%' }} placeholder="请输入" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="景区类型"
              required={true}
            >
              {getFieldDecorator('type', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
                validateTrigger: ['onChange'],
                rules: [
                  {
                    required: true,
                    message: '景区类型必填',
                  },
                ],
              })(
                <Select   placeholder="请选择"  style={{ width: '80%' }}>
                  {
                    type_list.map((item)=>{
                      return  (
                        <Option key={item.value} value={item.value}>
                          {item.name}
                        </Option>
                      )
                    })
                  }
                </Select>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="其他内容(副标题)"
            >
              {getFieldDecorator('otherContent', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Input style={{ width: '80%' }} placeholder="请输入" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="所属城市"
            >
              {getFieldDecorator('cityCascader', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Cascader options={city_list}  onChange={this.handleCityChange}  style={{ width: '80%' }}		allowClear  placeholder="请选择" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="地址"
            >
              {getFieldDecorator('cityName', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Input style={{ width: '80%' }} placeholder="请输入" />
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="评论条数"
            >
              {getFieldDecorator('assessNum', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Input style={{ width: '80%' }} placeholder="请输入" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="评分"
            >
              {getFieldDecorator('score', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <InputNumber max={5} min={1} placeholder="请输入(最大5)"  style={{ width: '80%' }} />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="列表项图片"
            >
              {getFieldDecorator('imageItemFile', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Upload {...itemImgProps}>
                  <Button>
                    <Icon type="upload" /> 上传
                  </Button>
                  <span style={{fontSize : 15,color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span>
                </Upload>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="列表内容图片"
            >
              {getFieldDecorator('imageContentFile', {
                //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              })(
                <Upload {...contentImgProps}>
                  <Button>
                    <Icon type="upload" /> 上传
                  </Button>
                  <span style={{fontSize : 15,color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用高大于宽的分辨率。比如 ：9:16(450*800、340*600、1080*1920)</span>
                </Upload>
              )}
            </FormItem>
            <Row>
              <Col span ={4} align="right">
                  轮播 ：
              </Col>
              <Col span ={20}>
                <Collapse bordered={false} >
                  <Panel header={( <div>轮播图片 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span></div> )} key="1">
                    {getFieldDecorator('carouselImageFile', {
                      //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
                    })(
                      <Upload {...carouselImageProps}>
                        <div>
                          <Icon type="plus" />
                          <div className={Class["ant-upload-text"]}>上传</div>
                        </div>
                      </Upload>
                    )}
                  </Panel>
                  <Panel header={( <div>轮播视频 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span></div> )} key="2">
                    {getFieldDecorator('carouselVideoFile', {
                      //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
                    })(
                      <Upload {...carouselVideoProps}>
                        <div>
                          <Icon type="plus" />
                          <div className={Class["ant-upload-text"]}>上传</div>
                        </div>
                      </Upload>
                    )}
                  </Panel>
                </Collapse>
              </Col>
            </Row>

          </form>
        </Spin>
      </Modal>
    );
  }
}
